<template>
  <view class="admin-container">
    <!-- 侧边栏 -->
    <view class="sidebar">
      <view class="logo">
        <text>后台管理系统</text>
      </view>
      <view class="menu-list">
        <view v-for="(item, index) in menuList" :key="index" class="menu-item">
          <view class="menu-title" @click="toggleSubMenu(index)">
            <text>{{ item.title }}</text>
            <text class="arrow" :class="{ 'arrow-down': item.isOpen }">></text>
          </view>
          <view class="sub-menu" v-if="item.isOpen">
            <view v-for="(subItem, subIndex) in item.children" 
                  :key="subIndex" 
                  class="sub-menu-item"
                  :class="{ active: currentPath === subItem.path }"
                  @click="navigateTo(subItem.path)">
              <text>{{ subItem.title }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 主内容区 -->
    <view class="main-content">
      <view class="header">
        <view class="user-info">
          <text>管理员</text>
        </view>
      </view>
      <view class="content">
        <router-view></router-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          title: '系统管理',
          isOpen: true,
          children: [
            { title: '用户管理', path: '/admin/user' },
            { title: '角色管理', path: '/admin/role' },
            { title: '权限管理', path: '/admin/permission' }
          ]
        },
        {
          title: '内容管理',
          isOpen: false,
          children: [
            { title: '文章管理', path: '/admin/article' },
            { title: '分类管理', path: '/admin/category' }
          ]
        }
      ],
      currentPath: ''
    }
  },
  methods: {
    toggleSubMenu(index) {
      this.menuList[index].isOpen = !this.menuList[index].isOpen
    },
    navigateTo(path) {
      this.currentPath = path
      uni.navigateTo({
        url: path
      })
    }
  }
}
</script>

<style>
.admin-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 250px;
  background-color: #001529;
  color: #fff;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #002140;
}

.menu-list {
  padding: 10px 0;
}

.menu-item {
  cursor: pointer;
}

.menu-title {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-title:hover {
  background-color: #002140;
}

.arrow {
  transform: rotate(90deg);
  transition: transform 0.3s;
}

.arrow-down {
  transform: rotate(0deg);
}

.sub-menu {
  background-color: #000c17;
}

.sub-menu-item {
  padding: 10px 20px 10px 40px;
}

.sub-menu-item:hover {
  background-color: #002140;
}

.sub-menu-item.active {
  background-color: #1890ff;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header {
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #f0f2f5;
  overflow: auto;
}
</style> 